<template>
    <div>
        <div class="post-head">
            <div>
                <span :class="['head-item',{'active':show[0]}]" @click="showDiv(0)">待办</span>
                <span :class="['head-item',{'active':show[1]}]" @click="showDiv(1)">已办</span>
                <span :class="['head-item',{'active':show[2]}]" @click="showDiv(2)">全部</span>
            </div>
        </div>
        <div class="division"></div>
        <div>
            <div v-show="show[0]">
                <!-- 搜索部分 -->
                <el-form size="small" :inline="true" :model="queryMap" class="demo-form-inline">
                    <el-form-item label="公文标题">
                        <el-input
                                clearable
                                @clear="search"
                                v-model="queryMap.title"
                                @keyup.enter.native="search"
                                class="input-with-select">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="公文文号">
                        <el-input
                                clearable
                                @clear="search"
                                v-model="queryMap.inNum"
                                @keyup.enter.native="search"
                                class="input-with-select">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-date-picker
                                :clearable="false"
                                v-model="range"
                                type="datetimerange"
                                :value-format="'yyyy-MM-dd HH:mm:ss'"
                                :picker-options="pickerOptions"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期"
                                align="right">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="button" @click="search">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                    :data="tableData"
                    tooltip-effect="dark"
                    :header-cell-style="{background:'#f0f0f0',color:'#606266'}"
                    @selection-change="handleSelectionChange">
                <el-table-column type="selection"></el-table-column>
                <el-table-column prop="address" label="公文文号">
                </el-table-column>
                <el-table-column prop="name" label="公文标题">
                </el-table-column>
                <el-table-column prop="name" label="主题词">
                </el-table-column>
                <el-table-column prop="name" label="来文单位">
                </el-table-column>
                <el-table-column prop="name" label="来文名称">
                </el-table-column>
                <el-table-column prop="name" label="收文时间">
                </el-table-column>
              </el-table>

              <div class="block_1">
                <!-- 分页部分 -->
                <el-pagination
                    style="margin-top:10px;"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryMap.pageNum"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="queryMap.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
              </div>
            </div>
            <div v-show="show[1]">已办</div>
            <div v-show="show[2]">全部</div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            show: [true,false,false],
            pickerOptions: {
                shortcuts: [
                    {
                        text: '今天(此刻)',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '昨天',
                        onClick(picker) {
                            const end = new Date(new Date(new Date().toLocaleDateString()).getTime());
                            const start = new Date(new Date(new Date().toLocaleDateString()).getTime());
                            start.setTime(start.getTime() - 3600 * 1000 * 24);
                            picker.$emit('pick', [start, end]);
                        }
                    },
                    {
                        text: '最近一周',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                    }, {
                        text: '最近两个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 60);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }
                ]
            },
            queryMap: {pageNum: 1, pageSize: 10},
            tableData: [],
            multipleSelection: [],  //表格选中的值
            range:[],  //查询日期范围
            total: 0,
        }
    },
    methods: {
        showDiv(index) {
            for (let i = 0; i < this.show.length; i++) {
                if (i == index) {
                    this.show.splice(i, 1, true)
                }else{
                    this.show.splice(i, 1, false)
                }
            }
        },
        //表格选中的值
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        /**
         * 加载表格数据
         */
        async loadTableData() {

            if(this.range!=null&&this.range.length===1){
                this.queryMap.startTime=this.range[0];
            }else if(this.range!=null&&this.range.length===2){
                this.queryMap.startTime=this.range[0];
                this.queryMap.endTime=this.range[1];
            }

            // findInStockList(this.queryMap).then(res => {
            //     this.total = res.data.list.total;
            //     this.tableData = res.data.list.dataList;
            // })
            
            
        },
        /**
         * 改变页码
         */
        handleSizeChange(newSize) {
            this.queryMap.pageSize = newSize;
            //this.loadTableData();
        },
        /**
         * 点击分页
         */
        handleCurrentChange(current) {
            this.queryMap.pageNum = current;
            //this.loadTableData();
        },
        /**
         * 查询入库单
         */
        search() {
            this.queryMap.pageNum = 1;
            console.log(this.queryMap);
            //this.loadTableData();
        },
    }
}
</script>

<style scoped>
    .post-head{
        width: 100%;
        display: flex;
        font-weight: 500;
    }
    .head-item{
        margin-left: 25px;
        cursor:pointer;
        padding-left: 10px;
        padding-right: 10px;
    }
    .active{
        border-bottom: 2px solid rgb(52, 186, 240);
        
    }
    /* 分割线 */
    .division{
        width: 100%;
        margin: 0 auto;
        height: 2px;
        background-color: rgb(209, 208, 208);
        margin-top: 15px;
        margin-bottom: 15px;
    }
    /* 分页组件样式 */
    .block_1 {
        position: fixed;
        bottom: 6%;
        right: 6%;
    }
    /* 搜索条件区样式 */
    .demo-form-inline{
        width: 100%;
        font-weight: 600;
        display: flex;
        justify-content: space-between;
    }
    /* 单个按钮样式 */
    .button{
        background-color: rgb(60, 136, 172);
        color: white;
        border-radius: 5px;
        width: 100px;
    }
</style>